import React, { useState } from 'react';
import {
    View,
    Text,
    StyleSheet,
    FlatList,
    Image,
    TouchableOpacity,
    TextInput,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

interface MemberItem {
    id: string;
    name: string;
    phone: string;
    contribution: number;
    avatar: any;
}

const HuiScreen = () => {
    const [searchText, setSearchText] = useState('');

    const members: MemberItem[] = [
        {
            id: '1',
            name: '大核桃',
            phone: '13777777777',
            contribution: 159.0,
            avatar: require('./assets/1.jpg'),
        },
        {
            id: '2',
            name: '小核桃仁',
            phone: '13777777777',
            contribution: 569.5,
            avatar: require('./assets/1.jpg'),
        },
        {
            id: '3',
            name: '老核桃',
            phone: '13777777777',
            contribution: 926.0,
            avatar: require('./assets/1.jpg'),
        },
        {
            id: '4',
            name: '大核桃',
            phone: '13777777777',
            contribution: 856.5,
            avatar: require('./assets/1.jpg'),
        },
        {
            id: '5',
            name: '小核桃仁',
            phone: '13777777777',
            contribution: 159.0,
            avatar: require('./assets/1.jpg'),
        },
        {
            id: '6',
            name: '老核桃',
            phone: '13777777777',
            contribution: 569.5,
            avatar: require('./assets/1.jpg'),
        },
        {
            id: '7',
            name: '大核桃',
            phone: '13777777777',
            contribution: 926.0,
            avatar: require('./assets/1.jpg'),
        },
        {
            id: '8',
            name: '小核桃仁',
            phone: '13777777777',
            contribution: 856.5,
            avatar: require('./assets/1.jpg'),
        },
        {
            id: '9',
            name: '老核桃',
            phone: '13777777777',
            contribution: 926.0,
            avatar: require('./assets/1.jpg'),
        },
        {
            id: '10',
            name: '大核桃',
            phone: '13777777777',
            contribution: 856.5,
            avatar: require('./assets/1.jpg'),
        },
    ];

    const renderMemberItem = ({ item }: { item: MemberItem }) => (
        <TouchableOpacity style={styles.memberItem}>
            <View style={styles.memberInfo}>
                <Image source={item.avatar} style={styles.avatar} />
                <View style={styles.textInfo}>
                    <Text style={styles.name}>{item.name}</Text>
                    <Text style={styles.phone}>{item.phone}</Text>
                </View>
            </View>
            <View style={styles.contributionContainer}>
                <Text style={styles.contributionLabel}>贡献¥</Text>
                <Text style={styles.contributionValue}>{item.contribution}</Text>
                <Icon name="chevron-right" size={20} color="#999" />
            </View>
        </TouchableOpacity>
    );

    return (
        <View style={styles.container}>
            <View style={styles.searchContainer}>
                <Icon name="search" size={20} color="#999" style={styles.searchIcon} />
                <TextInput
                    style={styles.searchInput}
                    placeholder="搜索"
                    placeholderTextColor="#999"
                    value={searchText}
                    onChangeText={setSearchText}
                />
            </View>
            <FlatList
                data={members}
                renderItem={renderMemberItem}
                keyExtractor={item => item.id}
                contentContainerStyle={styles.listContainer}
                showsVerticalScrollIndicator={false}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    searchContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#f5f5f5',
        margin: 15,
        borderRadius: 8,
        paddingHorizontal: 12,
        paddingVertical: 8,
    },
    searchIcon: {
        marginRight: 8,
    },
    searchInput: {
        flex: 1,
        fontSize: 14,
        color: '#333',
        padding: 0,
    },
    listContainer: {
        paddingHorizontal: 15,
    },
    memberItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#f5f5f5',
    },
    memberInfo: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    avatar: {
        width: 40,
        height: 40,
        borderRadius: 20,
        marginRight: 12,
    },
    textInfo: {
        justifyContent: 'center',
    },
    name: {
        fontSize: 16,
        color: '#333',
        marginBottom: 4,
    },
    phone: {
        fontSize: 14,
        color: '#999',
    },
    contributionContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    contributionLabel: {
        fontSize: 14,
        color: '#999',
    },
    contributionValue: {
        fontSize: 14,
        color: '#333',
        marginHorizontal: 4,
    },
});

export default HuiScreen; 